<!-- 第一次连接 -->
<template>
	<view class="firstConnect">
		<view class="imgbox" v-if="deviceStatus <= 0">
			<image
				v-if="deviceType != 'BP2A' && deviceType != 'ER'"
				:src="`/static/device/${deviceType}2.${['O2Max', 'F2Pro', 'ER'].includes(deviceType) ? 'jpg' : 'png'}`"
				mode="widthFix"
			></image>
		</view>
		<view class="bindBox" v-if="deviceStatus > 0"><image :src="getStatusImg" mode="widthFix"></image></view>
		<view class="deviceStatus" :class="{ active: deviceStatus == 2 }">{{ deviceStatusText }}</view>
		<view class="tip" v-if="deviceStatus <= 0">
			<view v-if="deviceType == 'O2Ring'">
				<view class="title">触摸开机：</view>
				<view>佩戴后触摸设备上方圆环开机，小程序搜索到设备后将自动完成绑定</view>
			</view>
			<view v-if="deviceType == 'BP2A'">
				<view class="title">按键开机：</view>
				<view>按下设备右侧“启动/停止”键开机</view>
				<image src="/static/device/BP2A1.png" mode="widthFix"></image>
				<view class="title">按键绑定：</view>
				<view>按下设备左侧按键，小程序搜索到设备后将自动完成绑定</view>
				<image src="/static/device/BP2A2.png" mode="widthFix"></image>
			</view>
			<view v-if="deviceType == 'O2Max'">
				<view class="title">按键开机：</view>
				<view>长按设备按钮开机</view>
				<view class="title">选择设备：</view>
				<view>设备开机后，在搜索列表中选择对应的设备绑定</view>
			</view>
			<view v-if="deviceType == 'F2Pro'">
				<view class="title">触摸绑定：</view>
				<view>站立在体脂秤上开机，小程序搜索到设备后将自动完成绑定</view>
			</view>
		</view>
		<view class="footerbar" v-if="[2, 3].includes(deviceStatus)">
			<u-button type="primary" v-if="deviceStatus == 2" text="开始使用" @tap="startUse"></u-button>
			<u-button type="error" v-if="deviceStatus == 3" text="重试" @tap="retry"></u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		deviceStatus: {
			type: [Number, String],
			default: 0
		},
		deviceType: {
			type: String,
			default: 'O2Ring'
		}
	},
	computed: {
		deviceStatusText() {
			let text = '搜索设备中……';
			switch (this.deviceStatus) {
				case -1:
				case 0: {
					text = '搜索设备中……';
					break;
				}
				case 1:
					{
						text = '正在绑定中……';
						break;
					}
					deviceType;
				case 2: {
					text = '绑定成功';
					break;
				}
				case 3: {
					text = '未发现设备';
					break;
				}
			}
			return text;
		},
		getStatusImg() {
			let img = '';
			switch (this.deviceStatus) {
				case 1: {
					img = 'bind';
					break;
				}
				case 2: {
					img = 'success';
					break;
				}
				case 3: {
					img = 'error';
					break;
				}
			}
			return `/static/device/${img}.jpg`;
		}
	},
	methods: {
		startUse() {
			this.$emit('startUse');
		},
		retry() {
			this.$emit('retry');
		}
	}
};
</script>

<style scoped lang="scss">
.imgbox {
	width: 420upx;
	margin: 0 auto;
	padding: 60upx 0;
}

.bindBox {
	width: 420upx;
	margin: 0 auto;
	padding: 60upx 0;
}

.deviceStatus {
	text-align: center;
	margin: 40upx auto;
	font-size: 40upx;
	font-weight: 600;

	&.active {
		color: #2ac35b;
	}
}

.tip {
	margin: 80upx 50upx 0;
	font-size: 30upx;

	.title {
		font-size: 34upx;
		font-weight: bold;
		margin-bottom: 30upx;
	}

	image {
		width: 50%;
		margin: 20upx auto;
		display: block;
	}
}

.footerbar {
	background: #fff;
	padding: 30upx 60upx;
	padding-bottom: calc(60upx + env(safe-area-inset-bottom) / 2);
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}
</style>
